<!-- eslint-disable vue/no-v-model-argument -->
<template>
  <div class="page-content">
    <LeeTable
      ref="table"
      v-bind="contentTableConfig"
      v-model:page="pageInfo"
      :list-data="dataList"
      :prop-list="propList"
      :list-count="listCount"
      @selectionChange="handleSelectChange"
    >
      <!-- header里的插槽 -->
      <template #headerHandler>
        <el-button v-if="isCreate" type="primary" @click="handleNewClick">
          新建用户
        </el-button>
        <el-button v-if="isDelete" type="danger" @click="handleDelAllClick">
          批量删除
        </el-button>
      </template>

      <!-- 列中的插槽 -->
      <!-- 状态 -->
      <!-- <template #status="scope">
        作用域插槽传递的值
        <el-button
          plain
          :type="scope.row.enable ? 'success' : 'danger'"
          size="small"
        >
          {{ scope.row.enable ? '启用' : '禁用' }}
        </el-button>
      </template> -->

      <!-- 创建时间 -->
      <template #createAt="scope">
        <span>{{ $filters.formatTime(scope.row.createAt) }}</span>
      </template>

      <!-- 更新时间 -->
      <template #updateAt="scope">
        <span>{{ $filters.formatTime(scope.row.updateAt) }}</span>
      </template>

      <!-- 操作 -->
      <template #handler="scope">
        <div class="handle-btns">
          <!-- 不要图标 表格宽度不够 -->
          <el-button
            v-if="isUpdate"
            text
            :bg="true"
            size="small"
            @click="handleEditClick(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="isDelete"
            type="danger"
            size="small"
            @click="handleDeleteClick(scope.row)"
            >删除</el-button
          >
        </div>
      </template>

      <!-- 动态加入剩余插槽 动态插槽名 传入一些某个组件独有的插槽 逐层传递到table-->
      <template
        v-for="item in othersPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <!-- 存在这个属性才加入插槽 严谨 -->
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </LeeTable>
  </div>
</template>

<script setup lang="ts">
import type { ComponentInternalInstance } from 'vue'
import LeeTable from '@/base-ui/table/Table.vue'
import { useSystemStore } from '@/store/modules/systems'
import { usePermission } from '@/hooks/usePermission'
import { ElMessage } from 'element-plus'
const systemStore = useSystemStore() // 系统整体store模块

const props = defineProps({
  contentTableConfig: {
    type: Object,
    required: true
  },
  propList: {
    type: Array,
    required: true
  },
  // 接收pageName
  pageName: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['newBtnClick', 'editBtnClick'])
// 访问组件实例上挂载的属性 才能使用$filters 多重解构，真的很离谱
const {
  appContext: {
    config: {
      globalProperties: { $filters }
    }
  }
} = getCurrentInstance() as ComponentInternalInstance

// 0、获取操作权限
const isCreate = usePermission(props.pageName, 'create')
const isUpdate = usePermission(props.pageName, 'update')
const isDelete = usePermission(props.pageName, 'delete')
const isQuery = usePermission(props.pageName, 'query')

// 1、双向绑定pageInfo
const pageInfo = ref({ currentPage: 1, pageSize: 10 })
watch(pageInfo, () => getPageData()) // 监听数据改变 如果修改了分页就重新获取数据

// 2、从user传下来的queryInfo 默认空对象
// 调用方法发送网络请求, 传pageName，然后在 store 里面拼接url
// 传入偏移量和一页的数据条数，再发新的请求 分页器
const getPageData = (queryInfo: any = {}) => {
  // 如果没有查询权限 直接返回 不再发请求
  if (!isQuery) return
  systemStore.getPageListAction(props.pageName, {
    offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
    size: pageInfo.value.pageSize,
    ...queryInfo
  })
}
// 初始就调用一次
getPageData()

// 3、从store里面获取数据
const dataList = computed(() => systemStore.pageListData(props.pageName)) // 根据pageName 从store/getters里 获取数据
const listCount = computed(() => systemStore.pageListCount(props.pageName))

// 4、获取其他动态插槽的名称 过滤掉固定存在的插槽
const othersPropSlots: any = props.propList.filter((item: any) => {
  // if (item.slotName === 'status') return false // 这个不是固定的了，根据页面来
  if (item.slotName === 'createAt') return false
  if (item.slotName === 'updateAt') return false
  if (item.slotName === 'handler') return false
  return true
})

// 5、删除/编辑/新建 按钮操作
const handleDeleteClick = (item: any) => {
  console.log(item)
  // 调用store删除方法
  systemStore.delPageDataAction({ pageName: props.pageName, id: item.id })
}
const handleNewClick = () => {
  emits('newBtnClick')
}
const handleEditClick = (item: any) => {
  emits('editBtnClick', item)
}

// 批量删除
let ids: number[] = [] // 先获取到ids的数据 根据id来删除的
const handleSelectChange = (val: any) => {
  ids = val
}
const handleDelAllClick = () => {
  // 先判断ids数组是否有元素
  if (ids.length) {
    // 遍历这个ids数组 然后发多次请求达到批量删除的效果 因为他没有批量删除的接口捏
    for (let i = 0; i < ids.length; i++) {
      systemStore.delPageDataAction({ pageName: props.pageName, id: ids[i] })
    }
    ElMessage({ type: 'success', message: '删除成功！' })
  } else {
    ElMessage({
      type: 'error',
      message: '请先选择要删除的数据'
    })
  }
}

// 暴露属性 才能用ref获取到这个组件实例的东西
defineExpose({ getPageData })
</script>

<style scoped>
.page-content {
  border-top: 20px solid #f0f2f5;
  padding: 20px;
  background-color: #ffffff;
}
</style>
